<template>
  <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="图元属性" name="graphPropPanel">
        <graph-property-panel ref="graphPropPanel" v-show="showGraphPropPanel">
        </graph-property-panel>
        <node-property-panel ref="nodePropPanel" v-show="!showGraphPropPanel && showNodePropPanel">
        </node-property-panel>
        <edge-property-panel ref="edgePropPanel" v-show="!showGraphPropPanel && !showNodePropPanel">
        </edge-property-panel>
      </el-tab-pane>
      <el-tab-pane label="电力资源" name="elecPropPanel">
        <elec-property-panel></elec-property-panel>
      </el-tab-pane>
    </el-tabs>
</template>

<script>
import GraphPropertyPanel from './views/graph-property-panel'
import NodePropertyPanel from './views/node-property-panel'
import ElecPropertyPanel from './views/elec-property-panel'
import EdgePropertyPanel from './views/edge-property-panel'

export default {
  name: 'PropertyPanel',
  components: { GraphPropertyPanel, NodePropertyPanel, ElecPropertyPanel, EdgePropertyPanel },
  data() {
    return {
      activeName: 'graphPropPanel',
      showGraphPropPanel: true,
      showNodePropPanel: false
    }
  },
  watch: {
    '$store.state.graphModule.operateNode': function(newVal) {
      if (newVal) {
        this.showGraphPropPanel = false
        this.showNodePropPanel = newVal.isNode()
      } else {
        this.showGraphPropPanel = true
      }
    }
  },
  computed: {}
}
</script>

<style scoped>
</style>